<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:p="http://thymeleafexamples">
<body style="background: #F1F3FA;">
<div class="page-bar"><!-- 当前位置-->
    <ul class="page-breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="#welcome-index-page">后台管理</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <i class="fa fa-role"></i>
            <a href="#welcome-index-page">角色管理</a>
        </li>
    </ul>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="row"><!-- 操作盒子 -->
            <div class="col-md-10 col-sm-12">
                <div class="col-md-2">
                    <select name="area_zou" id="level1" class="form-control"
                            onchange="Area.change('level1','level2','level3')">
                        <option value="">请选择</option>
                        <option value="1">欧洲-Europe</option>
                        <option value="2">亚洲-Asia</option>
                        <option value="3">大洋洲-Oceanian</option>
                        <option value="4">北美洲-North America</option>
                        <option value="5">南美洲-South America</option>
                        <option value="6">非洲-Africa</option>
                        <option value="7">南极洲-Antarctica</option>
                        <option value="8">北极洲-Arctic</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="area_country" id="level2" class="form-control"
                            onchange="Area.change('level2','level3')">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <input name="area_city" type="text" class="form-control" placeholder="城市名称"/>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-circle green"><i class="fa fa-search"></i>查询</button>
                </div>
            </div>
        </div>
        <div id="roleTableBTNs">
            <p:hasBtn name="role-create">
                <button class="btn btn-success add"><i class="fa fa-check"></i> 新增</button>
            </p:hasBtn>
            <p:hasBtn name="role-delete">
                <button class="btn btn-danger del"><i class="fa fa-check"></i> 删除</button>
            </p:hasBtn>
            <p:hasBtn name="role-update">
                <button class="btn btn-info upd"><i class="fa fa-check"></i> 编辑</button>
            </p:hasBtn>
            <p:hasBtn name="role-addRight">
                <button class="btn btn-warning green addRoleRight"><i class="fa fa-check"></i> 设置权限</button>
            </p:hasBtn>
        </div>
        <table id="roleTable"></table>
    </div>
</div>

<!-- 保存角色 -->
<div id="saveRole" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">保存角色</h4>
            </div>
            <div class="modal-body">
                <div class="row form-group">
                    <label class="control-label col-md-3">角色名称<span class="required"
                                                                    aria-required="true">* </span></label>
                    <div class="col-md-9">
                        <input name="groupName" type="text" class="form-control" placeholder="角色名称"/>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="control-label col-md-3">角色备注<span class="required"
                                                                    aria-required="true">* </span></label>
                    <div class="col-md-9">
                        <input name="remark" type="text" class="form-control" placeholder="备注"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn dark btn-outline cancel">取消</button>
                <button type="button" class="btn green sure">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 设置权限 -->
<div id="roleAddRight" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">设置角色权限</h4>
            </div>
            <div class="modal-body" style="height:500px">
                <div class="form-body select-authorities"></div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn dark btn-outline cancel">取消</button>
                <button type="button" data-dismiss="modal" class="btn green sure">确定</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/pages/permission/roleTable.js"></script>
</body>
</html>